<script setup lang="ts">
import { defineProps, onMounted, watch } from 'vue'
import { constant } from 'lodash'
import dayjs from 'dayjs'
import { useEcharts } from './echarts.ts'
import { api_getWeatherChart } from '~@/api/common/home.module'

// defineOptions({
//   name: 'LineChart',
// })

const { date } = defineProps(['date'])

// =================================== 今日24小时接口 | S

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    // 黄色
    {
      color: 'rgba(238, 190, 78, 1)',
      name: '实际气温',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: 'rgba(238, 190, 78, .7)',
            },
            {
              offset: 1,
              color: 'rgba(238, 190, 78, .3)',
            },
          ],
        },
      },
      emphasis: {
        focus: 'series',
      },
      data: [] as number[],
    },
    {
      // 蓝色
      color: 'rgba(69, 179, 227, 1)',
      name: '预报气温',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: 'rgba(69, 179, 227, .7)',
            },
            {
              offset: 1,
              color: 'rgba(69, 179, 227, .4)',
            },
          ],
        },
      },
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
  ],
}))

async function fetchData() {
  const d = dayjs().format('YYYY-MM-DD')
  const param = {
    startDate: date && date[0] || d,
    endDate: date && date[1] || d,
  }
  await api_getWeatherChart(param).then((res) => {
    if (res.data.isSuccess) {
      const { xLabel, yData } = res.data.result
      updateOptions((opts) => {
        opts.xAxis.data = xLabel
        opts.series[0].data = yData[0]
        opts.series[1].data = yData[1]
        return opts
      })
    }
  })
}

onMounted(() => {
  fetchData()
})

watch(() => date, async () => {
  fetchData()
})

// =================================== 今日24小时接口 | S

async function mockData() {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
  })

  updateOptions((opts) => {
    opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
    opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
    opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]

    return opts
  })
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory()

    opts.legend.data = originOpts.legend.data
    opts.series[0].name = originOpts.series[0].name
    opts.series[1].name = originOpts.series[1].name

    return opts
  })
}
</script>

<template>
  <div ref="domRef" class="h-220px overflow-hidden" />
</template>

<style scoped>
div {
  position: relative;
  top: -32px;
}
</style>
